<template>
  <el-card style="margin: 10px">
    <el-row :gutter="10">
      <el-col :span="ranking.span">
        <ul>
          <li :style="ranking.style? ranking.style:{height:'30px',lineHeight:'30px'}"
              @mouseover="clickcategory(index,row)"
              @mouseleave="mouseLeave"
              v-for="(row,index) in ranking.dataList "
              :key="index"
              :class="{divMoveOver:categoryIndex===index}"
          >
            {{ row.text }}
          </li>
        </ul>
      </el-col>
      <el-col v-for="(row,index) in imageList.imageList" :key="index" :span="5" >
        <div id="container">
          <el-row>
            <el-col :span="24" style="text-align: center">
              <a>
                <div>
                  <p style="font-size: 20px;font-weight: bold;margin-top: 10%">{{row.title}}</p>
                  <p style="font-size: 12px;margin-top: 5%;color: rgb(153,153,153)">{{row.descript}}</p>
                  <p style="display:table-cell"><a><img :src="getBaseImagePath(row.shop_explain.image)" width="100%" style="margin-top: 5%;"/></a></p>
                  <p style="font-size: 15px;font-weight: bold;margin-top: 5%">{{row.shop_explain.heat}}</p>
                  <p style="font-size: 12px;margin-top: 5%;color: rgb(153,153,153)">{{row.shop_explain.desc}}</p>
                  <p style="margin-top: 5%;"></p>
                </div>
              </a>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

  </el-card>
</template>


<script>
  import BaseVue from '../../components/BaseVue'
  export default {
    name: 'RankingList',
    components: {},
    extends:BaseVue,
    props: {
      ranking: {
        type: Object,
        default: () => {
          return {
            span: 20,
            dataList: []
          }
        }
      }
    },
    data() {
      return {
        categoryIndex: 0,
        imageList: []
      }
    },
    watch: {
      categoryIndex(val) {
        this.imageList = this.ranking.dataList[val];
      }
    },
    created(){
      this.imageList = this.ranking.dataList[0];
    },
    methods: {
      clickcategory(index) {
        this.categoryIndex = index
      },
      mouseLeave() {
        this.categoryIndex = 0
      },
    },
  }
</script>

<style scoped>
  #container:hover {
    box-shadow: 0 0 15px #888888;
  }

  .borders {
    border: 1px solid red;
    background-color: rgb(255, 255, 255);
  }

  .divMoveOver {
    background-color: rgb(247, 83, 27);
  }

  .mouseLeave {
    background-color: white;
  }
</style>
